<template>
    <div class="content">
        <div class="list-inner">
            <div class="list_item" v-for="item in game_list" :key="item.id" @click="$router.push('/home/gameCenter/'+item.id)">
                <div class="list_item_img">
                    <img width="100%" height="280" :src="$baseUrl+item.home_game_img" alt="">
                </div>
                <div class="card-content-pf">
                    <div class="card-content-pf_left">
                        <div style="float: left;"><img width="60" :src="$baseUrl+item.icon" alt=""></div>
                        <div style="float: left;" class="card-content-info-text">
                            <div class="card-content-info-name_2y0cn">{{ item.title }}</div>
                            <div class="card-content-info-des">{{ item.desc }}</div>
                        </div>
                    </div>
                    <div class="card-content-pf_right">
                        <!-- <p class="pf">5.8</p>
                        <p class="num">44人评</p> -->
                        <p class="label" :title="item.tag.join(',')">
                            <span v-for="(item,index) in item.tag" :key="index">{{ item }}</span>
                        </p>
                    </div>
                    
                </div>
            </div>

            
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive } from "vue";
const game_list = reactive([])
const getList = async () =>{
    const list = await axios.get('/gameList?limit=5')
    Object.assign(game_list,list.data.data)
    // console.log(game_list);
}
getList()
</script>

<style lang="less" scoped>
.content{
    width: 70%;

    .list-inner {
        
        .list_item {
            width: 95%;
            // height: 200px;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .1);
            border-radius: 10px;
            margin: 16px 0;
            transition: .3s;
            cursor: pointer;
            .list_item_img{
                overflow: hidden;
                border-radius: 10px 10px 0 0;
            }
            .list_item_img img{
                border-radius: 10px 10px 0 0;
                transition: all .5s;
            }
            .list_item_img img:hover{
                transform: scale(1.2);
            }
            .card-content-pf{
                display: flex;
                padding: 16px 20px 20px;
                .card-content-pf_left img{
                    border-radius: 14px;
                }
                .card-content-pf_left{
                    width: 70%;
                    margin: initial;
                    display: flex;
                    .card-content-info-text{
                        margin-left: 10px;
                        // margin-top: 7px;
                        .card-content-info-des{
                            font-size: 12px;
                            color: rgba(0, 0, 0, 0.6);
                            margin-top: 7px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal; /* 使用 normal 而不是 nowrap */
                            display: -webkit-box; /* 使用 flexbox 实现多行截断 */
                            -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
                            -webkit-line-clamp: 2; /* 显示两行，超出部分显示省略号 */
                            line-clamp: 2; /* 通常使用 -webkit-line-clamp */
                            width: 430px; /* 设置元素宽度 */
                        }
                    }
                }
                .card-content-pf_right{
                    width: 30%;
                    position: relative;
                    text-align: right;
                    margin-top: 4px;
                    display: flex;
                    align-items: center;
                    .pf{
                        font-size: 36px;
                        height: 44px;
                        line-height: 44px;
                        color: rgba(0, 0, 0, .85);
                        margin-right: 10px;
                        letter-spacing: -1px;
                        font-weight: 500;
                        float: left;
                        right: 50px;
                        position: absolute;
                    }
                    .num{
                        margin-top: 17px;
                        color: rgba(0, 0, 0, .5);
                    }
                    .label{
                        font-size: 13px;
                        margin-bottom: 8px;
                        margin-right: 0;
                        span{
                            border: 1px solid #1281d2;
                            color: #1281d2;
                            margin-right: 5px;
                            padding: 1px 5px;
                            font-size: 14px;
                            border-radius: 10px;
                            cursor: pointer;
                            display: inline-block;
                            max-width: 80px;
                            float: right;
                            margin-bottom: 5px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        span:hover{
                            border-color: @primary-color;
                        }
                    }
                }
            }
        }
    }
}
</style>